<template>
  <div style="width: 100%; height: 38px" />
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/mixins/resize'
import {
  getOperatorActivityDevicetrend
} from '@/api/operator'
export default {
  mixins: [resize],
  data() {
    return {
      chart: null,
      operator: ''
    }
  },
  computed: {},
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.operator = JSON.parse(localStorage.getItem('operator-info'))
      this.getOperatorActivityDevicetrend()
    },
    getOperatorActivityDevicetrend() {
      getOperatorActivityDevicetrend({
        oid: this.operator.oid,
        dateRange: 6,
        onlineDay: 5
      })
        .then((res) => {
          const yaxisData = res.groupData.map((item) => item.value)
          this.initChart({
            xaxisData: res.xaxisData,
            yaxisData: yaxisData
          })
        })
        .catch(this.$confirmError)
    },
    initChart(data) {
      this.chart = echarts.init(this.$el)
      const option = {
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          show: false,
          data: data.xaxisData
        },
        yAxis: {
          type: 'value',
          show: false
        },
        grid: {
          x: 1,
          y: 5,
          x2: 1,
          y2: 5
        },
        series: [
          {
            type: 'line',
            clip: true,
            symbol: 'none',
            lineStyle: {
              color: '#3086FA',
              width: 3
            },
            smooth: true,
            showSymbol: false,
            areaStyle: {
              opacity: 0.5,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#3086FA'
                },
                {
                  offset: 1,
                  color: '#ffffff'
                }
              ])
            },
            // data: [
            //   ['2019-10-10', 200],
            //   ['2019-10-11', 560],
            //   ['2019-10-12', 750],
            //   ['2019-10-13', 580],
            //   ['2019-10-14', 250],
            //   ['2019-10-15', 300],
            //   ['2019-10-16', 450],
            //   ['2019-10-17', 300],
            //   ['2019-10-18', 100]
            // ]
            data: data.yaxisData
          }
        ]
      }
      this.chart.setOption(option)
    }
  }
}
</script>

<style>
</style>
